//
// Drawer
//

.drawer {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  visibility: hidden;

  &.active {
    visibility: visible;
    .drawer-background {
      opacity: 1;
    }
    .drawer-content {
      transform: translate3d(0px, 0px, 0px);
    }
  }

  .drawer-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: $drawer-bg-color;
    z-index: -1;
    opacity: 0;
    visibility: inherit;
    will-change: opacity;
    transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  }

  .drawer-content {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    height: 100%;
    z-index: 1000;
    background-color: $drawer-content-bg-color;
    box-shadow: 0px 8px 8px -4px rgba(0, 0, 0, 0.2),
      0px 16px 16px 0px rgba(0, 0, 0, 0.14),
      0px 32px 32px 4px rgba(0, 0, 0, 0.12);
    transform: translateX(-278px);
    transition: -webkit-transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;

    width: $drawer-content-width;
    visibility: inherit;
  }
}
